<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getUser } from "@/utils/session.js";
import {query,exportPurchase} from '@/api/set/Supplier'
import {useRouter} from 'vue-router'
import host from "@/utils/env";
//获取用户信息
let user = {};
const tableData = ref([])
const page = ref(1);//默认第一页
const pageSize = ref(10);//每页显示条数
const total = ref(0);//总条数
/**
 * 分页
 * @param pg 第几页
 */
function chgpg(pg) {
  page.value = pg;
  initData();
}
/**
 * 分页
 * @param pgSize 每页多少条
 */
function chg(pgSize) {
  pageSize.value = pgSize;
  page.value = 1;
  initData();
}
//查询条件
const filters = ref({
  id:""
})
async function initData() {
  let data = {
    eid:getUser().eid,
    status:1,
    page:page.value,
    pageSize:pageSize.value,
    id: filters.value.id
  }
  let res = await query(data)
  if (res.code == 200) {
    tableData.value = res.data.list
    page.value = res.data.page
    pageSize.value = res.data.pageSize
    total.value = res.data.total
    statusOptions.value=res.data.list
  }
}
//搜索选择框
const statusOptions=ref([])
//新增路由跳转
const router = useRouter();
//导出
async function exExcel() {
  let res = await exportPurchase({})
  if (res.code==200){
    let url = host + res.data;
    window.open(url)
  }
}
onMounted(() => {
  initData()
  user = getUser();
  console.log("user>>>", user)
})
</script>

<template>
  <div>
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px;">筛选查询</span>
    </div>
    <div style="background-color: #FFFFFF"><br>
      <div style="margin-left: 40px;margin-top: -15px;height: 40px">
        <span>供应商:</span>
        <el-select
          v-model="filters.id"
          clearable
          placeholder="请选择"
          style="width: 120px;margin-left: 10px"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-button style="margin-left: 20px" @click="initData()">查询结果</el-button>
      </div>
    </div>
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px">企业列表</span>
      <!--工具条-->
      <div class="toolbar">
        <el-button type="primary" size="small" style="background-color: #60BFAE;border: #60BFAE" @click="router.push({path:'/supplier/save'})">新增</el-button>
        <el-button type="primary" size="small" @click="exExcel()">导出</el-button>
      </div>
    </div>
    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="code" label="编号" width="150" header-align="center" align="center" />
      <el-table-column prop="name" label="供应商名称" width="200" header-align="center" align="center" />
      <el-table-column prop="firstUser" label="首要联系人" width="180" header-align="center" align="center" />
      <el-table-column prop="mobile" label="手机" width="212" header-align="center" align="center" />
      <el-table-column prop="qq" label="QQ/邮箱" width="220" header-align="center" align="center" />
      <el-table-column prop="beginMoney" label="期初往来余额" width="140" header-align="center" align="center" />
      <el-table-column prop="status" label="状态" width="120" header-align="center" align="center">
        <template v-slot="o">
          <span v-if="o.row.status == 0">禁用</span>
          <span v-if="o.row.status == 1">启用</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:40px auto; width: 500px;">
      <el-pagination background @current-change="chgpg" @size-change="chg" :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]" layout="total,sizes,prev, pager, next,jumper" :total="total" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.toolbar {
  float: right;
}
</style>
